<template>
  <div>
    <el-drawer
      custom-class="learn-drawer"
      title="手动录入"
      :visible.sync="drawer"
      direction="btt"
      size="100%"
      :modal="false"
    >
      <el-row class="content">
        <el-col :span="12">
          <div class="content-left">
            <div style="margin-right: auto">输入区：</div>
            <el-button type="text" class="example" @click="show2 = !show2">输入范例</el-button>
            <div class="specification" @click="specification">输入规范：</div>
          </div>
          <div style="margin-left: 30px;">
            <el-collapse-transition>
              <div v-show="show2">
                <div class="transition-box">
                  <span style="color: #00b7ee;">单选题</span><br />
                  <span style="font-size: 12px">1.驾驶人有下列哪种违法行为一次记6分<br />
                        A、使用其他车辆行驶证<br />
                        B、饮酒后驾驶机动车<br />
                        C、车速超过规定时速50%以上<br />
                        D、违法占用应急车道行驶<br />
                        答案:D<br />
                        解析:请仔细阅读交规<br />
                        难度:简单</span>
                </div>
              </div>
            </el-collapse-transition>
            <el-input
            class="search-input"
            type="textarea"
            :rows="30"
            style="height: 800px"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input></div>
        </el-col>
        <el-col :span="12"><div class="content-right" style="margin-left: 20px;background: #DCDFE6; padding-left: 10px;">检查区：</div>
          <div style="height: 600px;border:1px solid #dcdfe6;margin-left: 20px">
            {{count}}
          </div>
        </el-col>
      </el-row>
    </el-drawer>
<!--    :before-close="drawerClose"-->
  </div>
</template>

<script>
export default {
  name: 'manualentry',
  data() {
    return {
      drawer: false,
      show2: false,
      textarea: '',
      quesList: [],
      quesForm: {
        question: '',
        list: []
      },
      count: ''
    }
  },
  methods: {
    init() {
      this.drawer = true
    },
    // setdeoler(val) {
    //   this.quesForm.question = val
    //   const i = val.indexOf('A', 'B')
    //   if (i > -1) {
    //     this.quesForm.List.push(val)
    //   }
    //   // this.quesList.push(this.quesForm)
    //   console.log(this.quesList)
    // },
    specification() {}
  }
}
</script>

<style scoped>
  .dropdown{
    background: #c8c9cc;
    margin: 0 30px;
    height: 200px;
  }
  .content{
    height: 60px;
    width: 100%;
    display: flex;
    font-size: 20px;
    margin-top: 10px;
    line-height: 40px;
  }
  .content-left{
    display: flex;
    justify-content: flex-end;
    padding-left: 10px;
    margin-left:30px;
    background: #DCDFE6;
  }
  .example{
    color: #00b7ee;
    font-size: 14px;
    margin-right: 20px;
    cursor:pointer;
  }
  .transition-box{
    height: 100%;
    padding-left: 10px;
    border: 1px solid #dcdfe6;
    /*background-color: #dcdfe6;*/
  }
  .specification{
    color: #00b7ee;
    font-size: 14px;
    cursor:pointer;
  }
</style>
